<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
   <div class="dashboard-container" id="combo-app">
    <div class="container">
      <div class="tableBar">
        <el-input
          v-model="input"
          placeholder="请输入合同号"
          style="width: 250px"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
            style="cursor: pointer"
            @click="init"
          ></i>
        </el-input>
        <div class="tableLab">
          <span class="span-btn delBut non" @click="deleteHandle('批量',null)">批量删除</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
        @selection-change="handleSelectionChange"
      >
          <el-table-column
                  type="selection"
                  width="25"
          ></el-table-column>
        <el-table-column
          prop="contractId"
          label="合同编号"
        ></el-table-column>
        <el-table-column prop="userName" label="用户名"  align="center"></el-table-column>

        <el-table-column
          prop="licensePlate"
          label="车牌号"
        ></el-table-column>
        <el-table-column
          prop="leaPrice"
          label="租赁价格"
        >
        </el-table-column>
        <el-table-column prop="leaDay" label="租赁天数">
        </el-table-column>
          <el-table-column
                  prop="conDay"
                  label="续租天数"
          >
          </el-table-column>
          <el-table-column
                  prop="conRent"
                  label="续租金额"
          >
          </el-table-column>
        <el-table-column
          prop="facMoney"
          label="预收金额"
        >
        </el-table-column>
        <el-table-column
          prop="wheRenewal"
          label="是否续约"
          :formatter="row => row.wheRenewal === 1 ? '是' : '否'"
        >
        </el-table-column>
        <el-table-column
          prop="wheReturn"
          label="是否还车"
          :formatter="row => row.wheReturn === 1 ? '是' : '否'"
        >
        </el-table-column>
          <el-table-column
                  label="操作"
                  width="160"
                  align="center"
          >
              <template slot-scope="scope">
                  <el-button
                          type="text"
                          size="small"
                          class="blueBug"
                          @click="editHandle(scope.row)"
                  >
                      业务结算
                  </el-button>
                  <el-button
                          type="text"
                          size="small"
                          class="delBut non"
                          @click="deleteHandle('单删', scope.row.contractId)"
                  >
                      删除
                  </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
       <el-dialog
               :title="conDate.title"
               :visible.sync="conDate.dialogVisible"
               width="50%"
               :before-close="handleClose"

       >
           <el-form
                   class="demo-form-inline"
                   label-width="100px"
                   :inline="true"

           >
               <el-form-item label="用户名：">
                   <el-input
                           v-model="conDate.userName"
                           placeholder="请更改用户姓名"
                           style="width: 120px"
                   />
               </el-form-item>
               <el-form-item label="用户id：">
                   <el-input v-model="conDate.userId"   placeholder="用户id" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="员工id：">
                   <el-input v-model="conDate.empId"   placeholder="员工id" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="合同id：">
                   <el-input v-model="conDate.contractId"   placeholder="合同id" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="汽车id：">
                   <el-input v-model="conDate.carId"   placeholder="汽车id" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="车牌号：">
                   <el-input v-model="conDate.licensePlate"   placeholder="车牌号" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="起租日期：">
                   <el-input v-model="conDate.starDate"   placeholder="起租日期" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="起租时间：">
                   <el-input v-model="conDate.starTime"   placeholder="起租时间" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="租赁天数：">
                   <el-input v-model="conDate.leaDay"   placeholder="租赁天数" style="width: 120px" />
               </el-form-item>
               <el-form-item label="租赁价格：">
                   <el-input v-model="conDate.leaPrice"   placeholder="租赁价格" style="width: 120px" />
               </el-form-item>
               <el-form-item label="押金：">
                   <el-input v-model="conDate.deposit"   placeholder="押金费用" style="width: 120px" />
               </el-form-item>
               <el-form-item label="超时时间：">
                   <el-input v-model="conDate.overTime"   placeholder="超时天数" style="width: 120px" />
               </el-form-item>
               <el-form-item label="超时费用：">
                   <el-input v-model="conDate.overPay"   placeholder="超时费用" style="width: 120px" />
               </el-form-item>
               <el-form-item label="违规罚金：">
                   <el-input v-model="conDate.penalty"   placeholder="罚金数目" style="width: 120px" />
               </el-form-item>
               <el-form-item label="续租天数：">
                   <el-input v-model="conDate.conDay"   placeholder="续租天数" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="续租租金：">
                   <el-input v-model="conDate.conRent"   placeholder="续租租金" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="实收金额：">
                   <el-input v-model="conDate.facMoney"   placeholder="实收金额" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="应退金额：">
                   <el-input v-model="conDate.backMoney"   placeholder="应退款数" style="width: 120px"/>
               </el-form-item>
               <el-form-item label="还车日期：">
                   <template>
                       <div class="block">
                           <span class="demonstration"></span>
                           <el-date-picker
                                   v-model="conDate.retDate"
                                   type="date"
                                   placeholder="选择日期"
                                   style="width: 120px"
                                   @change="handleDateChange()">
                           </el-date-picker>
                       </div>
                   </template>
               </el-form-item>
               <el-form-item label="还车时间：">
                   <el-time-select
                           v-model="conDate.retTime"
                           :picker-options="{
                         start: '08:30',
                          step: '00:15',
                         end: '18:30'
  }"
                           placeholder="选择时间"
                           style="width: 120px">
                   </el-time-select>
               </el-form-item>
               <el-form-item label="是否续约：" >
                   <el-select v-model="conDate.wheRenewal" placeholder="续约状态" style="width: 120px" disabled="">
                       <el-option label="是" value="1" ></el-option>
                       <el-option label="否" value="0"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="是否还车：" >
                   <el-select v-model="conDate.wheReturn" placeholder="归还状态" style="width: 120px" disabled="">
                       <el-option label="是" value="1" ></el-option>
                       <el-option label="否" value="0"></el-option>
                   </el-select>
               </el-form-item>

           </el-form>
           <span
                   slot="footer"
                   class="dialog-footer"
           >
        <el-button
                size="medium"
                @click="conDate.dialogVisible = false"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
        <el-button
                v-if="action != 'edit'"
                type="primary"
                size="medium"
                class="continue"
                @click="submitForm('go')"
        > 保存并继续修改 </el-button>
      </span>
       </el-dialog>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/combo.js"></script>
    <script>
      new Vue({
        el: '#combo-app',
        data() {
          return {
             input: '',
             counts: 0,
             page: 1,
             pageSize: 10,
             tableData : [],
             dishState : '',
             checkList: [],
              conDate: {
                  'title': '',
                  'dialogVisible': false,
                  'contractId': '',
                  'userName': '',
                  'licensePlate': '',
                  'leaDay': '',
                  'leaPrice': '',
                  'conDay' : '',
                  'conRent': '',
                  'facMoney': '',
                  'wheRenewal': '',
                  'wheReturn': '',
                  'userId':'',
                  'empId':'',
                  'carId':'',
                  'contractId':'',
                  'overTime':'',
                  'deposit':'',
                  'overPay':'',
                  'backMoney':'',
                  'penalty':'',
                  'starTime':'',
                  'starDate':'',
                  'retDate':'',
                  'retTime':'',
                  sort: ''
              }
          }
        },
        computed: {},
        created() {
          this.init()
        },
        mounted() {
        },
        methods: {
          async init () {
            const params = {
              page: this.page,
              pageSize: this.pageSize,
              name: this.input ? this.input : undefined
            }
            await getSetmealPage(params).then(res => {
              if (String(res.code) === '1') {
                this.tableData = res.data || []
                this.counts = res.total
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err)
            })
          },
          getImage (image) {
            return `/common/download?name=${image}`
          },
          handleQuery() {
            this.page = 1;
            this.init();
          },
            //选择日期后自动计算超时天数与超时罚款
            handleDateChange() {
                // 当日期改变时，这个方法会被调用
                // `value` 是选中的日期
                // 在这里，你可以根据 `value` 来修改其他输入框的值
                let start=new Date(this.conDate.starDate);
                let end =new Date(this.conDate.retDate);
                let endDate=new Date(start.getTime() + (this.conDate.conDay+this.conDate.leaDay) * 24 * 60 * 60 * 1000);
                end.setHours(0, 0, 0, 0);
                endDate.setHours(0, 0, 0, 0);

                if(end>endDate){
                    this.conDate.overTime=(end.getTime() - endDate.getTime())/(3600*24*1000);
                    this.conDate.overPay=this.conDate.overTime*(this.conDate.leaPrice/(this.conDate.conDay+this.conDate.leaDay))*2;
                }else {
                    this.conDate.overTime=0;
                    this.conDate.overPay=0;
                }

            },
          // 删除合同
            deleteHandle (type, id) {
            if (type === '批量' && id === null) {
              if (this.checkList.length === 0) {
                return this.$message.error('请选择删除对象')
              }
            }
            this.$confirm('确定删除该合同, 是否继续?', '确定删除', {
              'confirmButtonText': '确定',
              'cancelButtonText': '取消',
            }).then(() => {
              deleteSetmeal(type === '批量' ? this.checkList.join(',') : id).then(res => {
                if (res.code === 1) {
                  this.$message.success('删除成功！')
                  this.handleQuery()
                } else {
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })
            })
          },

            //合同结算
            editHandle(dat) {
                this.conDate.title = '业务结算'
                this.action = 'edit'
                this.conDate.contractId=dat.contractId
                this.conDate.userId=dat.userId
                this.conDate.carId=dat.carId
                this.conDate.empId=dat.empId
                this.conDate.userName = dat.userName
                this.conDate.licensePlate = dat.licensePlate
                this.conDate.leaDay = dat.leaDay
                this.conDate.leaPrice = dat.leaPrice
                this.conDate.conDay = dat.conDay||0
                this.conDate.conRent = dat.conRent||0
                this.conDate.facMoney = dat.facMoney

                this.conDate.wheRenewal = (dat.wheRenewal===1?'是':'否')
                this.conDate.wheReturn = (dat.wheReturn===1?'是':'否')

                this.conDate.penalty = dat.penalty||0
                this.conDate.backMoney = dat.deposit
                this.conDate.deposit = dat.deposit
                this.conDate.overTime = dat.overTime
                this.conDate.overPay = dat.overPay
                this.conDate.starDate = dat.starDate
                this.conDate.starTime = dat.starTime
                this.conDate.retDate = dat.retDate
                this.conDate.retTime = dat.retTime
                this.conDate.dialogVisible = true
            },
            // 关闭弹窗
            handleClose(st) {
                this.conDate.dialogVisible = false
            },
          //状态更改
          statusHandle (row) {
            let params = {}
            if (typeof row === 'string' ){
              if (this.checkList.length == 0){
                this.$message.error('批量操作，请先勾选操作合同！')
                return false
              }
              params.ids = this.checkList.join(',')
              params.status = row
            } else {
              params.ids = row.contractId
              params.status = row.status ? '0' : '1'
            }
            this.$confirm('确认更改该合同状态?', '提示', {
              'confirmButtonText': '确定',
              'cancelButtonText': '取消',
              'type': 'warning'
            }).then(() => {
              // 起售停售---批量起售停售接口
              setmealStatusByStatus(params).then(res => {
                if (res.code === 1) {
                  this.$message.success('合同状态已经更改成功！')
                  this.handleQuery()
                } else {
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                  this.$message.error('请求出错了：' + err)
              })
            })
          },
            //数据提交
            submitForm(st) {
                const conDate = this.conDate
                const  valid = 1
                if(this.action==='edit'){
                    if(conDate.wheReturn==='是'){
                        editSetmeal(conDate).then(res => {
                            if (res.code === 1) {
                                this.$message.success('业务结算成功！该合同已经结束，并成功添加至完成合同中')
                                this.conDate.dialogVisible = false
                                this.handleQuery()
                            } else {
                                this.$message.error(res.msg || '操作失败')
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了：' + err)
                        })
                    }else{
                        this.$message.error('请确认车辆已归还');
                    }
                }
            },

          // 全部操作
          handleSelectionChange (val){
            let checkArr = []
            val.forEach((n) => {
              checkArr.push(n.contractId)
            })
            this.checkList = checkArr
          },
          handleSizeChange (val) {
            this.pageSize = val
            this.init()
          },
          handleCurrentChange (val) {
            this.page = val
            this.init()
          }
        }
      })
    </script>
</body>
</html>